<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片切换</title>
        <script src="jquery-3.1.1.js"></script>
        <style>
            h3{
                width: 100%;
                height: 30px;
                text-align: center;
                margin: 0;
                padding: 0;
                background-color: #E9E4E3;
            }
            ul,li{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            ul{
                width: 190px;
                margin: 0 auto;
                border: 1px solid #aaa;
                
            }
            li{
                height: 150px;
                width: 180px;
                margin: 5px 5px 0 5px;
                /*border: 1px solid red;*/
                position: relative;
                display: flex;
                overflow: hidden;
            }
            /*li img:nth-child(2){
                display: none;
            }*/
            p{
                margin: 0;
                padding: 0;
                color: #fff;
                width: 180px;
                height: 20px;
                font-size: 14px;
                position: absolute;
                bottom:0;
                text-align: center;
            }
            .p1{
                background-color: #CF5460;
            }
            .p2{
                background-color: #1A4B51;
            }
            .p3{
                background-color: #2975AB;
            }
            img{
                position: relative;
                /*left: 0;*/
            }
            /*ul li p:first-child{
                position: absolute;
                top:-10px;
            }*/
        </style>
    </head>
    <body>
        <ul>
            <h3>专辑推荐</h3>
            <li>
                <img src="images/1_1.jpg" alt="">
                <img src="images/1_2.jpg" alt="">
                <p class="p1">COCOON/可可尼</p>
                <p class="p1">几何为网-极致绚烂</p>
            </li>
            <li>
                <img src="images/2_1.jpg" alt="">
                <img src="images/2_2.jpg" alt="">
                <p class="p2">INSUN/恩裳</p>
                <p class="p2">2013春印象</p>
            </li>
            <li>
                <img src="images/3_1.jpg" alt="">
                <img src="images/3_2.jpg" alt="">
                <p class="p3">JNBY/江南布衣</p>
                <p class="p3">NANMENG/南梦</p>
            </li>         
        </ul>
    </body>
</html>
<script>
    $('p:odd').css('bottom',-20)
    $('li').hover(function(){
        console.log(233)
        $(this).children('img').stop().animate({
            right:180
        },500)
        $(this).children('p').first().stop().animate({
            bottom:-20
        },500)
         $(this).children('p').last().stop().animate({
            bottom:0
        },500)
    },function(){
        $(this).children('img').stop().animate({
            right:0
        },500)
        $(this).children('p').first().stop().animate({
            bottom:0
        },500)
         $(this).children('p').last().stop().animate({
            bottom:-20
        },500)
    })
</script>